<template>
	<div>
      <div :style="{ width: `${infoT.width}px`,height: `${infoT.height}px`,
        top: `${infoT.y}px`,left: `${infoT.x}px`,backgroundImage:`url(src/assets/images/process/${infoT.aniImg})`,
        }"
        class="process_children_img"
      >
      </div>
  </div>
</template>
<script lang='ts'>
import {defineComponent, ref, watch ,onMounted} from 'vue'
import FrameAnimation from '~/utils/FrameAnimation';
  export default defineComponent({
      props:{
        info:{
          type:Object,
          default:{
          }
        }
      },
      setup(props,context) {

        let infoT:any = ref({})
        let frameAnimation

        onMounted(async ()=>{
          infoT.value = await props.info
          frameAnimation = new FrameAnimation(infoT)
        })
        return {
          infoT,
        }
      }
  })
</script>

<style scoped>

  .process_children_img{
    position: absolute;
    z-index: 97;
  }

</style>
